<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <!-- <script src="./axios.js"></script> -->

    <style>
        .error {
            width: 300px;
            height: 300px;
            border: 1px solid red
        }
    </style>
</head>

<body>
    <!-- 通过插槽分发内容 -->
    <div id="demo">
        <!-- slot 渲染组件内的文本，如果没有slot标签，则不会渲染组件内部文本 -->
        <alert-box>
            <br>组件内插入一段文字 <br> 插入很多的文字
        </alert-box>
    </div>

    <script>
        Vue.component('alert-box', {
            template: `
                <div class="error"> 
                    <strong>Error</strong>
                    <slot></slot>
                </div>
            `
        });

        new Vue({
            el: "#demo"
        });
    </script>
</body>
<!-- 
    解析 DOM 模板时的注意事项

    有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。
    而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。

    这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

    <table>
    <blog-post-row></blog-post-row>
    </table>

    这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，
    并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

    <table>
    <tr is="blog-post-row"></tr>
    </table>

    需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

        字符串 (例如：template: '...')
        单文件组件 (.vue)
        <script type="text/x-template">

 -->

</html>